<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>预约详情</title>
</head>
<body>
    <!--头部-->
    <div class="daohanglan_box">
        <div class="title">
            <i class="icon iconfont icon-iconfontjiantou1"></i>
            <h4>预约详情</h4>
        </div>
    </div>

    <div class="dingdanzt_box clearfix">
        <i class="iconfont icon-huoche01"></i>
        <span>
            您的订单已受理，请在上门取件时段安排家中
            对接人并保持手机畅通
        </span>
    </div>


    <ul class="appointmentList appointmentDetails">
        <li>
            <h4>大件预约上门服务</h4>
            <div>
                <div class="clearfix">
                    <div class="fl">
                        <span class="grayFont">姓名：</span>
                        <span class="blackFont">小土狗</span>
                    </div>
                    <div class="fr">
                        <span class="blackFont">状态：</span>
                        <span class="greenFont">已发出</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">电话：</span>
                        <span class="blackFont">16932557561</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">物品类型：</span>
                        <span class="blackFont goodsName">玻璃茶几</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">重量：</span>
                        <span class="blackFont">10Kg</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">地址：</span>
                        <span class="blackFont">鼓楼区民生街金川科技园11栋211</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">下单时间：</span>
                        <span class="blackFont">2017/07/12  15：43</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div>
                        <span class="grayFont">上门时间：</span>
                        <span class="blackFont">2017/07/12  15：43</span>
                    </div>
                </div>
            </div>
            <!--进度-->
            <div class="stepsBox flex">
                <div class="step flex-1">
                    <div class="step__head is-success">
                        <div class="step__icon is-text">
                            <i class="icon iconfont icon-dingdan"></i>
                        </div>
                    </div>
                    <div class="step__main is-success" style="margin-left: -0.5rem;">等待接单</div>
                </div>
                <div class="step flex-1">
                    <div class="step__head is-process">
                        <div class="step__icon is-text">
                            <i class="icon iconfont icon-huoche01"></i>
                        </div>
                    </div>
                    <div class="step__main is-process">已接单</div>
                </div>
                <div class="step flex-1">
                    <div class="step__head is-wait">
                        <div class="step__icon is-text">
                            <i class="icon iconfont icon-right"></i>
                        </div>
                    </div>
                    <div class="step__main is-wait" style="margin-right: -0.2rem;">已完成</div>
                </div>
            </div>
            <!--操作-->
            <div class="operationBtn whiteBg clearfix">
                <span class="cancelBtn">取消订单</span>
                <span class="contactBtn">联系客服</span>
            </div>
        </li>
    </ul>
    <script src="js/layer.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script>
        $(function () {
            $(".appointmentList").on("click", ".cancelBtn", function () {
                layer.open({
                    content: '亲，确定取消订单吗？'
                    , btn: ['确定', '取消']
                    , yes: function (index) {
                        location.reload();
                        layer.close(index);
                    }
                });
            })
        })
    </script>
</body>
</html>